<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      const chart = echarts.init(this.$refs.chart)
      const data = [5, 20, 36, 10, 10, 20]
      const option = {
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E', 'F']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data,
          type: 'bar'
        }]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart {
  width: 80%;
  height: 80%;
}
</style>